<template>
  <div style="height: 100%;">
    <x-header :left-options="{backText: ''}">隐患排查任务</x-header>
    <div class="main-container">
      <scroller :on-refresh="refresh" :on-infinite="infinite">
        <div>
          <group v-for="(item, i) in list"  gutter="-1px" :key="i">
            <div title="" :border-intent="false"  @click="confirm(item)">
              <div class="more-box">
                <div class="box-bar">
                  <div><label class="bar-label" style="text-align: left;">测试线路</label><label class="bar-label" style="text-align: center;">安全防护</label><label class="bar-label" style="text-align: right;">物料平台</label></div>
                </div>
                <div class="box-label">
                  <label style="font-size:16px;"><b>{{item.CHECKMISSIONCONTENT}}</b></label>
                </div>
                <div class="box-label">
                  <label class="bar-boxlabel">启动日期</label><label class="bar-boxlabel" style="width:50%">{{item.STARTTIME}}</label>
                </div>
              </div>  
            </div>
          </group>
        </div>
      </scroller>
    </div>
    <router-view></router-view>
  </div>
</template>
<script>
    export default {
    name: "dangertask",
    components: {},
    mounted () { },
    data () {
            return {
            list: [],
            page: 1,
            keyword: '',
            createPop: false,//弹出层是否创建
            loading: false,//下拉刷新时禁止无限加载
        }
    },
    methods: {
        getData(callback, failed) {
        var params = '{"_method":"component.getListData","_param":{"bizObj":"CHECK_MISSION","service":"selectMore","fields":"*","filter":"1=1","currentPageIndex":1,"pageSize":50,"orderList":[{"field":"INPUTDATE","order":"desc"}],"QueryFormData":""}}';
        this.$ajax({
            method: 'post',
            url: this.COMMON_URL +'?_objName=CHECK_MISSION&_viewId=Check_Mission_List2&_t=231691&_winid=w9122',
            data: {
            FixJSON: params
            }
        }).then((res) => {
            console.log(res)
            callback(res)
        }).catch(err => {
            failed()
        })
        },
        confirm(item) {
            this.$router.push({
            path:'/hidangereport/reportdanger',
            query:{
                hidangername:this.$route.query.hidangername,
                hazardclause:this.$route.query.hazardclause,
                hidangertype:this.$route.query.hidangertype,
                hidangercategory:this.$route.query.hidangercategory,
                hidangerkind:this.$route.query.hidangerkind,
                hazardclauseid:this.$route.query.hazardclauseid,
                checkmisscontent:item.CHECKMISSIONCONTENT,
                startime:item.STARTTIME,
                pathid:this.$route.query.pathid,
                pointName:this.$route.query.pointName,
            }
        })
        },
        infinite(done) {//上划加载方法
        console.log("infinite");
        console.log(this.page);
        if(this.loading) {
            done();//TODO 啥意思
        } else {
            this.getData((res) => {
                //res.data.datas中的字段都是大写的，res.data.data中的字段有小写的
                if (res.status == '200' && res.data.datas.length > 0) {
                    this.list = [...this.list, ...res.data.datas]//TODO 啥意思
                    this.page++;
                    done();
                } else {
                done(true)//有错误的情况或者没有记录，传参true
                }
            }, () => {
                done(true)
            });
        }
        },
        refresh(done) {
        this.page = 1;
        console.log("refresh");
        console.log(this.page);
        this.loading = true;
        this.getData((res) => {
            if (res.status == '200' && res.data.datas.length > 0) {
            this.list = [...res.data.datas];
            this.page++;
            //done()
            } else {
            done(true);
            }
            this.loading = false;
        }, () => {
            done(true);
        });
        }
    },
    computed: {
        // userInfo () {
        //   return this.$store.state.user
        // },
        // mainPop () {
        //   return this.$store.state.mainPop
        // }
    },
    watch: {
        // '$route' () {
        //   if (this.$route.query.refresh) {
        //     this.$router.push('/task')
        //     // this.changeType(this.currentTab)
        //   }
        //   this.$store.commit('updateLoadingStatus', false);
        // }
    }
    }
</script>

<style>
.more-box{
  margin: 15px 40px;
}

.bar-label{
  width: 33%;
  display:inline-block;
  color:#929292;
}

.box-label{
  margin-top: 10px;
  margin-bottom:10px;
}

.bar-boxlabel{
  width: 25%;
  display:inline-block;
}

.level-span{
  display: inline-block;
  width:36px;
  height:18px;
  border-radius: 4px;
  padding: 2px;
  text-align: center;
  font-size: 8px;
}
.highlevel-span{
  background:rgba(243,33,17,0.08);
  color:#F32111;
}

.midlevel-span{
  background:rgba(255,85,0,0.08);
  color:#FF5900;
}

.lowleve-span{
  background:rgba(60,130,246,0.08);
  color:#3C82F6;
}

.point-span{
  display: inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
}

.highpoint-span{
  background:#FF4A4A;
}

.midpoint-span{
  background:#FF5500;
}

.lowpoint-span{
  background:#3C82F6;
}

.plevel-span{
  font-size: 8px;
  margin-left: 6px;
}

.box-bar:before {
    content: '';
    display: block;
    height: 17px;
    position: absolute;
    border-left: 4px solid #A7AEFF;
    border-radius: 2px;
    left: 22px;
    top: 16px;
  }
</style>